<template>
  <page-wrap show-top hide-tab :bg-color="uNavColor" back :title="pageTitle">
    <view class="style-container" :style="'padding-top:' + navHeight + 'px;'">
      <view v-if="unReadNotifyCount > 0" class="list-item-right">
        {{ unReadNotifyCount }}条新订阅
      </view>
      <view class="list">
        <CareerSubscribe v-for="(item, index) in list" :key="index" :item="item"
          :isShowHistoryIndex="historyIndex(index)" />
        <view v-if="!list.length" class="no-data" style="height: 450rpx">
          <Empty :baseImg="emptyImg" label="暂无相关订阅" :fontWeight="400" class="empty" />
        </view>
        <u-loadmore v-if="list.length || (!loaded && list.length)" class="list-more" :status="moreLoading"
          :load-text="loadText" />
      </view>
    </view>
  </page-wrap>
</template>
<script>
import WxLoginMixin from "@/mixins/wxLogin";
import share from "@/mixins/share";
import { getNewNotify, getNewNotifyList } from "@/api/modules/career";
import CareerSubscribe from "../components/CareerSubscribe";
import Empty from "@/components/Empty.vue";
export default {
  mixins: [WxLoginMixin, share],
  components: {
    Empty,
    CareerSubscribe,
  },
  data() {
    return {
      pageTitle: "我的订阅",
      uNavColor: "#ffffff",
      navHeight: getApp().globalData.navHeight,
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      titleBarMarginTop: 0,
      srcGoBack:
        this.$imgBaseSelf + "career/positionDictionary/major_go_back.webp",
      unReadNotifyCount: 0,
      list: [],
      pageParams: {
        pageNo: 1,
        pageSize: 20,
      },
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,
    };
  },
  onShow() {},
  created() {},
  mounted() {
    this.getStatusBarHeight();
    this.getData();
    this.getCareerNewNotify();
  },
  onReachBottom() {
    this.getData(true);
  },
  methods: {
    clickBack() {
      uni.navigateBack();
    },
    onScroll(event) {},
    getStatusBarHeight() {
      const res = uni.getSystemInfoSync();
      this.statusBarHeight = res.statusBarHeight;
      this.titleBarMarginTop = this.statusBarHeight + "px";
    },
    getCareerNewNotify() {
      let params = {
        personId: this.personId,
      };
      getNewNotify(params).then((res) => {
        if (res && res.code == 200) {
          this.unReadNotifyCount = parseInt(res.data);
        }
      });
    },
    //获取订阅列表
    getData(isMore) {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
      };
      this.moreLoading = "loading";
      getNewNotifyList(params, this.personId).then((res) => {
        this.moreLoading = "loadmore";
        console.log("----getNewNotifyList--->", res);
        if (res.code == 200) {
          let data = res.data || [];
          if (isMore) {
            this.list.push(...data);
          } else {
            this.list = data;
          }
          if (data.length >= 20) {
            this.pageParams.pageNo++;
            console.log("----this.pageParams.pageNo++--->", res);
          } else {
            this.moreLoading = "nomore";
            console.log("----nomore--->", res);
          }
        }
      });
    },
    historyIndex(index) {
      var hisIndex = -1;
      var isFind = false;
      this.list.forEach((item, index) => {
        if (item.readFlag == 1 && !isFind) {
          //1：历史消息，2:未读消息
          hisIndex = index;
          isFind = true;
        }
      });
      // console.log("----historyIndex---->", hisIndex);
      if (index == hisIndex) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.style-container {
  background-color: #fafafa;
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
  height: 100vh;

  .styleTopContainer {
    .styleTitleContainer {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .styleTitleLeft {
        flex: 1;

        .styleGoBack {
          width: 44rpx;
          height: 44rpx;
          margin-left: 32rpx;
        }
      }

      .styleTitleCenter {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .styleTitleContent {
          font-weight: 800;
          color: #222222;
          line-height: 44rpx;
          font-size: 32rpx;
        }
      }

      .styleTitleRight {
        flex: 1;
      }
    }
  }
  .list-item-right {
    position: relative;
    width: 180rpx;
    margin: 24rpx auto;
    padding: 12rpx 20rpx 12rpx 40rpx;
    border-radius: 28rpx !important;
    background-color: #ededed;
    color: #222;
    font-size: 26rpx;
  }
  .list-item-right::before {
    content: "";
    position: absolute;
    top: 25rpx;
    left: 20rpx;
    width: 10rpx;
    height: 10rpx;
    background-color: red;
    border-radius: 50%;
  }
  .empty {
    margin-top: 40rpx;
    .empty_image {
      margin-bottom: 20rpx;
    }
  }
}
</style>
